<template>
	<!-- 投诉 -->
	<view class="box">
		<view class="">
			已选择投诉类型:{{info.title ||''}}
		</view>
		<view class="card">
			<view class="">
				投诉对象
			</view>
			<view class="" style="display: flex;align-items: center;" @click="openlist()">
				<text style="font-size: 24rpx;color: #969799;">{{ordersn||'请选择投诉对象'}}</text>
				<view class="u-iconfont uicon-arrow-right" style="color: #969799;font-size: 28rpx;"></view>
			</view>
		</view>

		<view class="remark">
			<view class="">
				<text style="color: red;">*</text><text style="font-weight: 700;">投诉&建议说明</text>
			</view>
			<view class="">
				<textarea name="" id="" cols="30" rows="20" class="textarea" style="" v-model="regust"
					placeholder="请在这里输入详细说明~"></textarea>
			</view>

			<view class="upload">
				<view class="" v-for="(i,x) in uplist" :key="x" style="position: relative;">
					<image :src="$BASE_URL + i" mode="aspectFill" style="width: 148rpx;height: 148rpx;"
						@click="prew(x)">
					</image>
					<image src="../../static/images/close.png" mode="aspectFill"
						style="position: absolute;right: -20rpx;top: -20rpx;width: 40rpx;height: 40rpx;z-index: 99;"
						@click="close(x)"></image>
				</view>

				<image :src="$BASE_URL + piclist[3]" mode="aspectFill" style="width: 148rpx;height: 148rpx;"
					@click="selectPic()" v-if="uplist.length <=2">
				</image>

			</view>
			<view class="" style="font-size: 24rpx;color: #969799;margin-top: 20rpx;">
				添加图片(最多三张)
			</view>
		</view>
		<button class="send" @click="send()" :disabled="loadingSend">
			提交
		</button>
		<u-popup v-model="showlist" mode='bottom' border-radius="20">
			<listview @selectorder='selectorderFn'></listview>
		</u-popup>
	</view>
</template>

<script>
	import listview from './components/list-view.vue'
	export default {
		components: {
			listview
		},
		data() {
			return {
				info: {}, //接受的细信息  id  title
				piclist: [], // 公共图片列表
				uplist: [], // 上传列表
				prewlist: [], // 预览列表
				showlist: false, // 展示订单
				ordersn: '',
				regust: '',
				loadingSend: false
			}
		},
		created() {
			// this.debounceSend = this.debounce(this.send(), 1000)
		},
		onLoad(e) {
			console.log(e);
			this.info = e
			this.getPic()
		},
		methods: {
			getPic() {
				this.$http('common.getPic', {}).then(res => {
					if (res.code === 1) {
						this.piclist = res.data.result.shopInIcon
					}
				});
			},
			selectPic(num) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.uploadFile({
							url: 'https://zuji.jiusuding.cn/api/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							fileType: 'image',
							name: 'file',
							header: {
								"Content-Type": "multipart/form-data",
								"token": uni.getStorageSync('token') || ''
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								console.log(JSON.parse(uploadFileRes.data).data.url);
								this.uplist.push(JSON.parse(uploadFileRes.data).data.url)
								this.prewlist.push(JSON.parse(uploadFileRes.data).data.fullurl)
							}
						});
					}
				});
			},
			close(x) {
				this.uplist.splice(x, 1)
				this.prewlist.splice(x, 1)
			},
			prew(x) {

				// 从相册选择6张图
				uni.previewImage({
					current: x,
					urls: this.prewlist,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			selectorderFn(data) {
				console.log(data);
				this.ordersn = data
				this.showlist = false
			},
			// 打开列表
			openlist() {
				this.showlist = true
			},
			debouncedHandleSubmit() {
				this.debounce(this.send(), 1000)
			},

			send() {
				this.loadingSend = true
				let data = {
					shopro_complaint_make_id: this.info.id,
					order_sn: this.ordersn,
					remark: this.regust,
					images: this.uplist.join(',')
				}
				this.$http('user.ComplaintSub', data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.loadingSend = true
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1500)
					}else {
						this.loadingSend = false
						uni.showToast({
							title: res.code.msg,
							icon: 'none'
						})
					}

				})


			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		min-height: 100vh;
		background-color: #f4f6f4;
		padding: 0 30rpx;
		padding-top: 30rpx;
		box-sizing: border-box;


		.card {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
		}

		.remark {
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			background-color: #fff;
		}

		.textarea {
			margin-top: 20rpx;
			background-color: #f6f6f6;
			border-radius: 20rpx;
			height: 400rpx;
			padding: 20rpx;
			font-size: 24rpx;
		}

		.upload {
			// width: 148rpx;
			// height: 148rpx;
			// border-radius: 20rpx;
			margin-top: 30rpx;
			display: flex;

			image {
				margin-right: 30rpx;
			}

		}


		.selecttitle {
			width: 100%;
			height: 1000rpx;

		}

		.send {
			position: fixed;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			width: 90%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #f9675c;
			color: #fff;
		}

		.send:active {
			background-color: #eb6056;
		}
	}
</style>
